<template>
    <div ref="echart" :style="{ width: '100%', height: height + 'px' }"></div>
</template>

<script>
import store from "./store";
export default {
    props: {
        echartJS: String,
        modelValue: Object,
        height: {
            type: Number,
            default: 480,
        },
    },
    created() {
        this.loadJs();
    },
    mounted() {
        this.showChart();
    },
    methods: {
        showChart() {
            if (!window.echarts || !this.$refs.echart || !this.modelValue)
                return;
            let option1 = { ...this.modelValue };
            this.echart = echarts.init(this.$refs.echart);
            this.echart.setOption(option1);
            this.echart.resize();
        },
        loadJs() {
            let url = this.echartJS || store["echartJS"];
            if(!url){
                throw "没有echartJS属性，无法加载echart库";
            }
            $server.loadJS(url,"echarts").then((res) => {
                this.showChart();
            });
        },
        getAsImg(){
            var imgData = this.echart.getConnectedDataURL({
                type: 'png',
                pixelRatio: 1,
                backgroundColor: '#fff'
            });
            return imgData;
        }
    },
    watch: {
        modelValue() {
            this.showChart();
        },
        height() {
            if (!window.echarts || !this.$refs.echart) return;
            this.echart.resize();
        },
    },
};
</script>